<template>
  <div class="main">
    <transition name="fade">
      <div v-if="isEditMode" class="left-board border">
        <div class="left-scrollbar">
          <el-collapse
            v-model="activeCollapse"
            :accordion="true"
          >
            <el-collapse-item
              title="自定义控件"
              name="customControl"
            >
              <div class="btn-group">
                <div
                  v-for="(item,index) in btnList"
                  :key="'btn-item'+index"
                  class="btn"
                >
                  <div
                    class="btn-body"
                    @click="btnClick(item)"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item
              title="定制控件"
              name="customizedControl"
            >
              <div class="btn-group">
                11111
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </transition>

    <div class="center-board border">
      <div class="center-tool-bar border">
        <transition name="fade">
          <el-button v-if="isEditMode" type="danger" size="default" @click="clear">清空</el-button>
        </transition>
        <el-button type="primary" size="default" @click="preview">{{ isEditMode ? '预览' : '退出预览' }}</el-button>
      </div>
      <div class="center-scrollbar">
        <div class="form">
          <el-form
            ref="form"
            label-width="auto"
            :inline="false"
            size="normal"
            :model="form"
          >
            <el-form-item
              v-for="(item,index) in formItemList"
              :key="'form-item'+index"
              :label="item.label"
            >
              <el-input
                v-if="item.type==='input'"
                v-model="form[`${item.key}`]"
                :placeholder="`请输入${item.label}`"
              />
              <el-input
                v-if="item.type==='textarea'"
                v-model="form[`${item.key}`]"
                type="textarea"
                :placeholder="`请输入${item.label}`"
              />
              <el-radio-group
                v-if="item.type==='radio'"
                v-model="form[`${item.key}`]"
              >
                <el-radio
                  v-for="(option,optionIndex) in item.options"
                  :key="optionIndex"
                  :label="option.value"
                >
                  {{ option.label }}
                </el-radio>
              </el-radio-group>
              <el-select
                v-if="item.type==='select'"
                v-model="form[`${item.key}`]"
                :placeholder="`请选择${item.label}`"
              >
                <el-option
                  v-for="(option,optionIndex) in item.options"
                  :key="optionIndex"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              <el-checkbox-group
                v-if="item.type==='checkbox'"
                v-model="form[`${item.key}`]"
                @change="$forceUpdate()"
              >
                <el-checkbox
                  v-for="(option,optionIndex) in item.options"
                  :key="optionIndex"
                  :label="option.value"
                >
                  {{ option.label }}
                </el-checkbox>
              </el-checkbox-group>
              <dynamic-table v-if="item.type === 'table'" :columns="item.cols" :is-edit-mode="true" />
              <el-divider v-if="item.type === 'divider'" content-position="center">{{ item.content }}</el-divider>
              <!-- <gp-upload v-if="item.type === 'img-uploader'" /> -->
              <img-cropper v-if="item.type === 'img-uploader'" :limit-num="item.limitNum" :limit-file-size="item.limitSize" :file-type="item.fileType.join(',')" />
              <transition name="fade">
                <div v-if="isEditMode" style="float:right">
                  <el-button
                    v-if="index !== 0"
                    type="text"
                    size="default"
                    @click="moveUp(index)"
                  >上移</el-button>

                  <el-button
                    v-if="index !== formItemList.length-1"
                    type="text"
                    size="default"
                    @click="moveDown(index)"
                  >下移</el-button>

                  <el-button
                    type="text"
                    size="default"
                    @click="edit(index)"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="text"
                    size="default"
                    @click="deletE(index)"
                  >
                    删除
                  </el-button>
                </div>
              </transition>

            </el-form-item>
          </el-form>
          <!-- <div>
            form:
            {{ form }}
          </div>
          <br>
          <div>
            formItemList:
            {{ formItemList }}
          </div>
          <br>
          <div>
            currentFormItem:
            {{ formItemList[currentIndex] }}
          </div> -->
          <!-- <el-button
            type="primary"
            size="default"
            @click="test"
          >
            test
          </el-button> -->
        </div>
      </div>
    </div>
    <transition name="fade">
      <div v-if="isEditMode" class="right-board border">
        <div class="right-scrollbar">
          <div class="form">
            <el-form
              v-if="formItemList.length > 0"
              ref="form"
              label-width="auto"
              :inline="false"
              size="normal"
            >
              <el-form-item v-if="formItemList[currentIndex].type !== 'table' && formItemList[currentIndex].type !== 'divider'" label="标题">
                <el-input
                  v-model="formItemList[currentIndex].label"
                  placeholder="请输入标题"
                  size="normal"
                  clearable
                />
              </el-form-item>
              <!-- <el-form-item label="控件类型">
              <el-select
                v-model="formItemList[currentIndex].type"
                placeholder="请选择控件类型"
                size="normal"
                @change="didChangeFormItemType"
              >
                <el-option
                  v-for="(item,index) in itemTypes"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item> -->
              <el-form-item
                v-if="formItemList[currentIndex].type === 'radio' || formItemList[currentIndex].type === 'select' || formItemList[currentIndex].type === 'checkbox'"
                label="选项"
                size="normal"
              >
                <div
                  v-for="(option,index) in formItemList[currentIndex].options"
                  :key="index"
                >
                  <el-input
                    v-model="option.label"
                    placeholder="展示字段"
                    size="normal"
                    clearable
                  />
                  <el-input
                    v-model="option.value"
                    placeholder="字段值"
                    size="normal"
                    clearable
                  />
                  <el-button
                    type="danger"
                    size="small"
                    @click="deleteOption(index)"
                  >
                    -
                  </el-button>
                </div>
                <el-button
                  type="primary"
                  size="small"
                  @click="addOption"
                >
                  +
                </el-button>
              </el-form-item>
              <el-form-item v-if="formItemList[currentIndex].type === 'table'" label="最小行数" size="normal">
                <el-input v-model="formItemList[currentIndex].min" placeholder="请输入最小行数" size="normal" clearable />
              </el-form-item>
              <el-form-item v-if="formItemList[currentIndex].type === 'table'" label="最大行数" size="normal">
                <el-input v-model="formItemList[currentIndex].max" placeholder="请输入最大行数" size="normal" clearable />
              </el-form-item>
              <el-form-item v-if="formItemList[currentIndex].type === 'divider'" label="内容" size="normal">
                <el-input v-model="formItemList[currentIndex].content" placeholder="请输入分割线内容" size="normal" clearable />
              </el-form-item>
              <!-- <el-form-item v-if="formItemList[currentIndex].type === 'img-uploader'" label="图片纵横比" size="normal">
                <el-row type="flex" justify="center" align="">
                  <el-input v-model.number="formItemList[currentIndex].vertical" placeholder="纵" size="normal" clearable />
                  <div style="margin:0 5px">/</div>
                  <el-input v-model.number="formItemList[currentIndex].horizontal" placeholder="横" size="normal" clearable />
                </el-row>
              </el-form-item> -->
              <el-form-item v-if="formItemList[currentIndex].type === 'img-uploader'" label="上传数量限制" size="normal">
                <el-input-number
                  v-model="formItemList[currentIndex].limitNum"
                  size="normal"
                  :min="1"
                  :max="10"
                />
              </el-form-item>
              <el-form-item v-if="formItemList[currentIndex].type === 'img-uploader'" label="文件大小限制" size="normal">
                <el-row type="flex" justify="start">
                  <el-input
                    v-model.number="formItemList[currentIndex].limitSize"
                    placeholder="请输入文件大小限制"
                    size="normal"
                  />
                  <div style="margin-left:5px">M</div>
                </el-row>
              </el-form-item>
              <el-form-item v-if="formItemList[currentIndex].type === 'img-uploader'" label="文件类型" size="normal">
                <el-checkbox-group v-model="formItemList[currentIndex].fileType">
                  <el-checkbox v-for="item in picFileTypeList" :key="item.value" :label="item.value">
                    {{ item.label }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import gpUpload from '@/components/gp-upload'
import imgCropper from '@/components/common-img-cropper'
import dynamicTable from '@/components/common-dynamic-table'
export default {
  components: {
    'dynamic-table': dynamicTable,
    // 'gp-upload': gpUpload,
    'img-cropper': imgCropper
  },
  props: {
    formItemList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      isEditMode: true,
      id: 0,
      picFileTypeList: [
        {
          label: '.jpg',
          value: '.jpg'
        },
        {
          label: '.png',
          value: '.png'
        },
        {
          label: '.gif',
          value: '.gif'
        }
      ],
      activeCollapse: ['customControl'], // 默认展开的折叠面板
      btnList: [ // 左侧添加控件按钮的list
        {
          name: '单行文本',
          type: 'input'
        },
        {
          name: '多行文本',
          type: 'textarea'
        },
        {
          name: '单选框',
          type: 'radio'
        },
        {
          name: '下拉选择',
          type: 'select'
        },
        {
          name: '多选框',
          type: 'checkbox'
        },
        {
          name: '动态表格',
          type: 'table'
        },
        {
          name: '分割线',
          type: 'divider'
        },
        {
          name: '图片上传',
          type: 'img-uploader'
        }
      ],
      form: {},
      currentIndex: 0,
      formItemTemplate: [
        {
          type: 'input',
          label: '单行文本',
          key: ''
        },
        {
          type: 'textarea',
          label: '多行文本',
          key: ''
        },
        {
          type: 'radio',
          label: '单选框',
          key: '',
          options: [
            {
              label: '选项1',
              value: '1'
            },
            {
              label: '选项2',
              value: '2'
            }
          ]
        },
        {
          type: 'select',
          label: '下拉选择',
          key: '',
          options: [
            {
              label: '选项1',
              value: '1'
            },
            {
              label: '选项2',
              value: '2'
            }
          ]
        },
        {
          type: 'checkbox',
          label: '多选框',
          key: '',
          options: [
            {
              label: '选项1',
              value: '1'
            },
            {
              label: '选项2',
              value: '2'
            }
          ]
        },
        {
          type: 'table',
          key: '',
          cols: [
            {
              id: 'col_0',
              label: '第0列'
            }
          ],
          max: 0,
          min: 0
        },
        {
          type: 'divider',
          label: '',
          content: '分割线'
        },
        {
          type: 'img-uploader',
          label: '图片上传',
          limitNum: 1,
          limitSize: 10,
          // vertical: 9,
          // horizontal: 16,
          fileType: ['.png']
        }
      ]
    }
  },
  // computed: {
  //   itemTypes() {
  //     return this.formItemTemplate.map(item => item.type)
  //   }
  // },
  watch: {
    formItemTemplate: {
      handler: function(val) {
        console.log(val)
      },
      deep: true
    }
  },
  methods: {
    btnClick(btn) {
      this.id += 1
      const found = this.formItemTemplate.find(item => {
        return item.type === btn.type
      })
      const foundCopy = this._.cloneDeep(found)
      foundCopy.key = `item_${this.id}`
      if (foundCopy.type === 'checkbox') {
        this.form[foundCopy.key] = []
      }
      this.formItemList.push(foundCopy)
    },
    edit(index) {
      this.currentIndex = index
    },
    deletE(index) {
      this.formItemList.splice(index, 1)
    },
    addOption() {
      this.formItemList[this.currentIndex].options.push({ label: '', value: '' })
      this.$forceUpdate()
    },
    deleteOption(index) {
      this.formItemList[this.currentIndex].options.splice(index, 1)
    },
    // didChangeFormItemType(e) {
    //   if (e === 'radio' || e === 'select' || e === 'checkbox') {
    //     this.$set(this.formItemList[this.currentIndex], 'options', [])
    //   }
    //   if (e === 'checkbox') {
    //     this.form[this.formItemList[this.currentIndex].key] = []
    //   }
    //   // if (e !== 'table' && this.formItemList[this.currentIndex].col) {
    //   //   this.formItemList[this.currentIndex] = this._.omit(this.formItemList[this.currentIndex], 'col')
    //   // }
    //   // if (e === 'table') {
    //   //   this.formItemList[this.currentIndex].label = ''
    //   //   // this.formItemList[this.currentIndex].col = {
    //   //   //   id: 'col_0',
    //   //   //   label: '第0列'
    //   //   // }
    //   //   this.$set(this.formItemList[this.currentIndex], 'col', { id: 'col_0', label: '第0列' })
    //   // }
    // },
    resetForm() {
      this.id = 0
      this.currentIndex = 0
      this.form = {}
      this.formItemList = []
    },
    clear() {
      this.$confirm('确定删除吗？').then(() => {
        this.resetForm()
      })
    },
    moveUp(index) {
      const temp = this.formItemList[index - 1]
      this.$set(this.formItemList, index - 1, this.formItemList[index])
      this.$set(this.formItemList, index, temp)
    },
    moveDown(index) {
      const temp = this.formItemList[index + 1]
      this.$set(this.formItemList, index + 1, this.formItemList[index])
      this.$set(this.formItemList, index, temp)
    },
    preview() {
      // this.$refs.preview.show()
      this.isEditMode = !this.isEditMode
    },
    imgUpload() {
      this.$message.warning('请点击预览查看效果')
    }
  }
}
</script>

<style scoped>
@keyframes btn-body-hover {
  100% {
    filter: brightness(1.06);
  }
}
.main {
  display: flex;
  flex-direction: row;

}
.border {
    border: 1px solid #f3f6f9;
}
.left-board {
    height:100vh;
    width: 400px;
}
.left-scrollbar {
    height: 100vh;
    overflow-y: scroll;
}
.center-board {
    height: 100vh;
    width: 100%;
}
.center-scrollbar {
    height: calc(100vh - 75px);
    overflow-y: scroll;
    overflow-x: hidden;
}
.center-tool-bar {
    display: inline-block;
    margin: 1%;
    padding: 10px;
}
.right-board {
    width:400px;
    height: 100vh;
}
.right-scrollbar {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.btn-group {
    padding: 8px;
    height: 100%;
}
.btn {
    display: inline-block;
    width: 48%;
    margin: 1%;
}
.btn-body {
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #67c23a;
    color:#fff
}
.btn-body:hover {
  animation-name: btn-body-hover;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
}

.form {
    margin: 10px;
}
</style>
